<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios拦截器</title>
    <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
</head>
<body>  
    <button>获取英雄</button>
    <button>获取段子</button>
    <script>
        // NProgress.start();
        // setTimeout(() => {
        //     NProgress.done();
        // }, 3000)



        //设置请求拦截器  then 
        axios.interceptors.request.use(config => {
            //请求之前的公共操作
            NProgress.start();
            console.log('请求拦截器 - 成功执行');
            //参数的统一设置
            // config.params = {
            //     id: 100,
            //     date: Date.now()
            // }
            //必须要返回 config 配置对象
            return config;
            // return Promise.reject('出了问题了!!');
        }, error => {
            console.log('请求拦截器 - 失败执行');
            return Promise.reject(error);
        });

        //设置响应拦截器
        axios.interceptors.response.use(response => {
            NProgress.done();
            console.log('响应拦截器 - 成功执行');
            //返回响应结果
            return response.data;
        }, error => {
            NProgress.done();
            console.log('响应拦截器 - 失败执行');
            return Promise.reject(error);
        })

        //获取元素
        let btns = document.querySelectorAll("button");
        //绑定事件
        btns[0].addEventListener('click', function(){
            axios.get('http://127.0.0.1:8090/lol')
            .then(response => {
                //处理结果时, 只想获取到『响应体』
                console.log(response);
            }, error => {
                console.log(error);
            })
        })

        btns[1].addEventListener('click', async function(){
            try{
                let result = await axios.get('http://127.0.0.1:8090/duanzi');
                //发送成功时 执行的代码
                console.log(result);
            }catch(e){
                //发送失败时, 执行的代码
            }
        })
    </script>
</body>
</html>